import React, { useEffect, useRef, useState } from 'react'
import * as echarts from "echarts";
import './index.scss'
export default function Index() {
    const chartRef = useRef(null);
    // 获取本地存储内容
    const wind = JSON.parse(localStorage.getItem('settings')) || {};
    // console.log(wind, '123');
    const [menu, setMenu] = useState(wind.zoomMode);
    //修改颜色
    const [styles, setstyles] = useState(wind.colorData);
    const [colors, setcolors] = useState(wind.colors);
    let totalDays = 36;
    // x轴数据
    let [xData0, planData] = [[], []];
    let xData = (function () {
        let startTime = new Date('2019-07-04');
        let endTime = new Date('2019-10-11');
        let data = [];
        while (startTime.getTime() <= endTime.getTime()) {
            data.push(startTime);
            if (startTime.getDay() === 0) {
                // 周日处理其他事情
                planData.push(0);
            } else {
                planData.push(1);
            }
            startTime = new Date(startTime.getTime() + 86400 * 1000);
        }
        let weekStr = '日一二三四五六';
        return data.map(
            (item) =>
                item.getMonth() +
                1 +
                '-' +
                item.getDate() +
                '周' +
                weekStr[item.getDay()] +
                '',
        );
    })();
    // console.log(xData,planData);
    let planDataSum = planData.map((item, index) => {
        let sum = planData
            .slice()
            .splice(0, index + 1)
            .reduce((pre, cur) => {
                return pre + cur;
            });
        // console.log(sum);

        return sum > totalDays ? totalDays : sum.toFixed(1);
    });
    // 累计完成
    let recordData = [
        1,
        0.5,
        1,
        0, // 7月
        0.0,
        0.5,
        0.5,
        0.5,
        0.8,
        0.8,
        0.0,
        0.9,
        0.6,
        0.5,
        0.5,
        0.2,
        0.2,
        0.2,
        0.1,
        0.0,
        0.0,
        0.1,
        0.1,
        0.2,
        0.1,
        0.2,
        0.1,
        0.1,
        0.2,
        0.2,
        0.3,
        0.2, // 8月
        0.2,
        0.0,
        0.2,
        0.1,
        0.1,
        0.3,
        0.2,
        0.2,
        0.2,
        0.2,
        0.0,
        0.8,
        0.7,
        0.4,
        1,
        1,
        0.8,
        0.5,
        0.1,
        0.1,
        0.9,
        0.9,
        0.8,
        0.0,
        0.9,
        1,
        0.8,
        0.8, // 9月
        1,
        0.2,
        0.9,
        0.4,
        0.9,
        0.9,
        0.9,
        0.6,
        0.8,
        0.4,
        0.3,
        0.4,
        0.9,
        0.5,
        0.8,
        0.7,
        0.6,
        0.9,
        0.5,
        0.5,
        0.0,
        0.0,
        0.0,
        0.0,
        0.8,
        0.9,
        0.4,
        0.5,
        0.0,
        0.4,
        0.9,
        0.1,
        0.1,
        1,
        0.6, // 10月
        0.9,
        0.7,
        0.8,
        0.8,
        0.5,
    ];
    function linepie() {
        let chartInstance = echarts.init(chartRef.current);
        chartInstance.clear()
        const option = {
            legend: {
                data: ['当日计划', '当日完成', '累计计划', '累计完成'],
                textStyle: {
                    fontSize: 10,
                    color: styles[colors][0],
                },
                itemHeight: 10, // 修改icon图形大小
                itemWidth: 20, // 修改icon图形大小
                itemGap: 8, // 修改间距
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(0,0,0,0.3)', //设置背景图片 rgba格式
                borderWidth: 0,
                textStyle: {
                    fontSize: 12,
                    fontWeight: 'normal',
                    color: styles[colors][0],
                },
            },
            grid: {
                left: '5.4%',
                right: '0%',
                top: '10%',
                bottom: '10%',
            },
            dataZoom: {
                type: 'inside',
            },
            xAxis: {
                type: 'category',
                data: xData,
                axisLabel: {
                    //坐标轴刻度标签的相关设置。
                    formatter: function (params) {
                        var newParamsName = ''; // 最终拼接成的字符串
                        var paramsNameNumber = params.length; // 实际标签的个数
                        // 标签呈现两行显示
                        if (paramsNameNumber == 6) {
                            var provideNumber = 4; // 每行能显示的字的个数
                        } else if (paramsNameNumber == 7) {
                            var provideNumber = 5; // 每行能显示的字的个数
                        } else {
                            var provideNumber = 3; // 每行能显示的字的个数
                        }
                        // var provideNumber = 3;// 每行能显示的字的个数
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                        /**
                         * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                         */
                        // 条件等同于rowNumber>1
                        if (paramsNameNumber > provideNumber) {
                            /** 循环每一行,p表示行 */
                            for (var p = 0; p < rowNumber; p++) {
                                var tempStr = ''; // 表示每一次截取的字符串
                                var start = p * provideNumber; // 开始截取的位置
                                var end = start + provideNumber; // 结束截取的位置
                                // 此处特殊处理最后一行的索引值
                                if (p == rowNumber - 1) {
                                    // 最后一次不换行
                                    tempStr = params.substring(start, paramsNameNumber);
                                } else {
                                    // 每一次拼接字符串并换行
                                    tempStr = params.substring(start, end) + '\n';
                                }
                                newParamsName += tempStr; // 最终拼成的字符串
                            }
                        } else {
                            // 将旧标签的值赋给新标签
                            newParamsName = params;
                        }
                        //将最终的字符串返回
                        return newParamsName;
                    },
                    textStyle: {
                        color: styles[colors][0]
                    }
                },
                splitLine: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: styles[colors][0],
                    }
                },
            },

            yAxis: {
                type: 'value',
                show: true,
                name: '学习进度(天)/%',
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'white'
                    },
                },
                axisTick: { show: true },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: styles[colors][0],
                    },
                },
                // y轴数据自定义
                axisLabel: {
                    formatter: function (value) {
                        var texts = [];
                        if (value == 0) {
                            texts.push('0/(0%)');
                        } else if (value <= 3) {
                            texts.push('3/(8%)');
                        } else if (value <= 6) {
                            texts.push('6/(17%)');
                        } else if (value <= 9) {
                            texts.push('9/(25%)');
                        } else if (value <= 10) {
                            texts.push('10/(28%)');
                        } else if (value <= 12) {
                            texts.push('12/(33%)');
                        } else if (value <= 15) {
                            texts.push('15/(42%)');
                        } else if (value <= 18) {
                            texts.push('18/(50%)');
                        } else if (value <= 20) {
                            texts.push('20/(56%)');
                        } else if (value <= 21) {
                            texts.push('21/(58%)');
                        } else if (value <= 25) {
                            texts.push('25/(69%)');
                        } else if (value <= 30) {
                            texts.push('30/(83%)');
                        } else if (value <= 35) {
                            texts.push('10/(97%)');
                        } else if (value <= 40) {
                            texts.push('40/(111%)');
                        } else {
                            texts.push('50/(139%)');
                        }
                        return texts;
                    },
                    textStyle: {
                        color: styles[colors][0]
                    }
                },
            },
            color: styles[colors],
            series: [
                {
                    name: '当日计划',
                    type: 'bar',
                    stack: 'one',
                    data: planData,
                    itemStyle: { color: styles[colors][0] },
                    // 设置文字的颜色
                    label: {
                        color: styles[colors][0],
                        show: true,
                        fontSize: 8,
                        position: 'top', //在上方显示
                    },
                    backgroundStyle: {
                        color: styles[colors][0],
                    },
                },
                {
                    name: '当日完成',
                    type: 'bar',
                    stack: 'tow',
                    data: recordData,
                    itemStyle: { color: styles[colors][0] },
                    // 设置文字的颜色
                    label: {
                        color: styles[colors][0],
                        show: true,
                        fontSize: 8,
                        position: 'top', //在上方显示
                    },
                },
                {
                    name: '累计计划',
                    type: 'line',
                    data: planDataSum,
                    textStyle: {
                        color: styles[colors][0]
                    },
                    itemStyle: { color: 'red' },
                    lineStyle: {
                        color: 'red',
                    },
                    symbol: 'circle', //折线点设置为实心点
                    symbolSize: 6, //折线点的大小
                    areaStyle: {
                        //区域填充渐变颜色
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(255,0,0,1.000)', // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0,0,0,0)', // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                    },
                    // 设置文字的颜色
                    label: {
                        color: 'rgb(195,0,0)',
                        show: true,
                        fontWeight: 'bold',
                        fontSize: 8,
                        formatter: function (param) {
                            console.log('~~', param.dataIndex);
                            let percentStr =
                                param.dataIndex % 2 === 0
                                    ? `(${(param.value / 0.3).toFixed(1)})%`
                                    : '';
                            return `\v${param.value}\n\v${percentStr}`;
                        },
                    },
                },
                {
                    name: '累计完成',
                    type: 'line',
                    symbol: 'circle', //折线点设置为实心点
                    symbolSize: 6, //折线点的大小
                    data: recordData.map((item, index) => {
                        return recordData
                            .slice()
                            .splice(0, index + 1)
                            .reduce((pre, cur) => {
                                return pre + cur;
                            })
                            .toFixed(1);
                    }),
                    itemStyle: { color: '#acec51' },
                    areaStyle: {
                        //区域填充渐变颜色
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(0,150,0,1.000)', // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0,0,0,0)', // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                    },
                    // 设置文字的颜色
                    label: {
                        color: '#acec51',
                        show: true,
                        fontSize: 8,
                        fontWeight: 'bold',
                        formatter: function (param) {
                            console.log('~~', param.dataIndex);
                            let percentStr = param.dataIndex % 2 === 0 ? `(${(param.value / 0.3).toFixed(1)})%` : '';
                            return `\v${param.value}\n\v${percentStr}`;
                        },
                    },
                },
            ],
        };
        chartInstance.setOption(option);
        window.addEventListener("resize", function () {
            chartInstance.resize();
        });
    }
    //设置定时器
    useEffect(() => {
        linepie()
        if (wind.chartRefreshPeriod) {
            const timer = setInterval(() => {
                linepie();
            }, wind.chartRefreshPeriod * 1000)
            return () => clearInterval(timer)
        }
    });

    //三元判断函数
    function Mentime({ menu }) {
        console.log('Mentime', menu);
        switch (menu) {
            case "stretch":
                return (
                    <div id='ech' ref={chartRef} style={{ height: '80vh', width: '80vw', margin: '0 auto' }}></div>
                );
            case "cover":
                return (
                    <div id='ech' ref={chartRef} style={{ height: '100%', width: '100%', margin: '0 auto' }}></div>
                );
            case "contain":
                return (
                    <div id='ech' ref={chartRef} style={{ height: '80vh', width: '100%', margin: '0 auto' }}></div>
                );
            default:
                return (
                    <div id="ech" ref={chartRef} style={{ width: "100%", height: "95%", margin: "0 auto" }}></div>
                );
        }
    }
    return (
        <div className='right'>
            <h3>原计划36个学习日基本完成，后面包括找工作相关的时间，记录截止到10月11</h3>
            <Mentime menu={menu} />
            {/* <div id="ech" ref={chartRef} style={{ width: "100%", height: "95%", margin: "0 auto" }}></div> */}
        </div>
    );
}
